<template>
  <div v-cloak>
    <div class="bgImg" >
      <img src="../assets/img/load/commonbg.png" alt="背景">
    </div>
    <div class="container tabZone">

      <ul class="nav nav-tabs">
        <li v-for="(val,index) in navList" :key="index" :class="{'show':$route.params.id==index}" @click="frontInfo(index)">
          <router-link :to="'/advice/type/'+index+'/page/1'">{{val.title}}</router-link>
        </li>
      </ul>

      <div class="tabContent" >
        <FrontAdvice v-if="$route.params
.id==0" :article-id="articleId" :front-data="adviceList" :total-pages="totalPages" ></FrontAdvice>
        <AskWords v-if="$route.params
.id==1" :article-id="articleId" :total-pages="totalPages" :front-data="adviceList"  ></AskWords>
        <CoursewareLoad v-if="$route.params
.id==2" :article-id="articleId" :front-data="adviceList" :total-pages="totalPages" ></CoursewareLoad>
      </div>
    </div>
    <div class="commonAtten">
      <div class="join">
        <p>学淘宝 就来就问</p>
        <p>您身边靠谱的网店顾问</p>
        <button type="button" class="btn btn-success">立即加入</button>
      </div>
      <div class="sort">
        <div class="kinds">
          <a href="#">淘宝运营</a>
          <a href="#">淘宝美工</a>
          <a href="#">淘宝客服</a>
          <a href="#">直通车</a>
          <a href="#">淘宝客</a>
          <a href="#">手淘</a>
          <a href="#">数据</a>
          <a href="#">每周一问</a>
          <a href="#">店铺装修</a>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
    import CoursewareLoad from './CoursewareLoad'
    import FrontAdvice from './FrontAdvice'
    import AskWords from './AskWords'
    export default {
        name: "tab-conent",
        data(){
          return{
            firstString:'http://www.gengyong.com.cn',
            detailUrl1:'/advice/type/',
            detailUrl2:'/id/',
            //选项卡列表内容
            adviceList:{List:[]},
            //选项卡列表总页数
            //默认给2的原因是前沿咨询有两页
            totalPages:2,
            navList:[{title:'前沿资讯'},{title:'就问语录'},{title:'课件下载'},{title:'论坛'}],
            //文章类型ID
            articleId:{
              id:this.$route.params.id
            },
            //详情页数据
            receiveData:{},
            page:0
          }
        },
        components:{
          CoursewareLoad,
          FrontAdvice,
          AskWords
        },
        methods:{
          //页面加载完成，首先请求前沿资讯的内容 articleType文章类型ID
          frontInfo(articleType){
            console.log('咨询id'+articleType);
            this.articleId.id=articleType;
            var _this=this;
            this.$http.get('http://www.gengyong.com.cn/api/advice',{
              params:{
                page:this.page+1,
                type:articleType
              }
            }).then(function(res){
              _this.adviceList.List=res.data.info.info;
              _this.totalPages=res.data.info.total;
              console.log('咨询页数'+_this.totalPages);

            }).catch(function(err){
              console.log(err);
            });
          }
        }

    }
</script>

<style scoped>
  @import '../assets/css/advice.css';
  .show{border-bottom: 1px solid #f60;}
/*  .nav-tabs>li{display: inline-block;}
  .horizon{display:inline-block;}*/
  [v-cloak] {
    display: none;
  }
</style>
